<style scoped>
.RFIDTrackQuery{
  margin-right: 15px;
  padding: 0 15px;
  background-color: white;
  height: 94.5vh;
  position: relative;
}
.rfid{
  padding: 15px 0;
  display: flex;
  border-bottom: 2px solid #f4f4f4;
}
.rfid p{
  line-height: 30px;
  margin: 5px 5px 0 10px;
}
.e-inp{
  width: 160px;
  margin-top: 5px;
}
.rfid_b{
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
}

  .footView span{
    float: left;
    margin-right: 20px;
    line-height: 6vh;
    font-size: 14px;
  }
  .footView span i{
    margin-right: 5px;
  }
  .total{
    padding: 5px 10px;
    background: #f4f4f4;
    display: flex;
  }
  .total p:not(:first-child){
    margin-left: 50px;
  }
</style>

<style>
.RFIDTrackQuery .el-input__icon{
    line-height: 30px;
  }
.RFIDTrackQuery .rfid .el-input__inner{
  height: 30px !important;
}
.RFIDTrackQuery .rfid_b .el-checkbox.is-bordered{
  height: 30px;
  padding: 3px 10px 9px 10px;
}
.RFIDTrackQuery .rfid_b .el-checkbox{
  margin-right: 5px;
}
element.style{
  height: 30px;
}
</style>

<template>
  <div class="RFIDTrackQuery">
    <div class="rfid">
      <p>客户</p>
      <el-input style="width:60px;margin:5px 12px 0 6px;" v-model="customerNo" :disabled="jxAgent"></el-input>
      <el-select class="e-inp" v-model="customerName" style="width:90px" @change="e=>{this.customerNo=e}" :disabled="jxAgent">
        <el-option
          v-for="item in customerList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          <span style="float:left">{{item.value}}</span>
          <span style="float:right">{{item.label}}</span>
        </el-option>
      </el-select>

      <p>RFID</p>
      <el-input class="e-inp" v-model="RFID"></el-input>

      <p>款号</p>
      <el-input class="e-inp" v-model="kindsNumber"></el-input>
      <!-- <el-cascader
        style="width:160px;height:30px;"
        v-model="kindsNumber"
        :options="kindsNumberList"
        :props="props"
        collapse-tags
        clearable>
      </el-cascader> -->

      <p>查询类型</p>
      <el-select class="e-inp" v-model="queryType">
        <el-option
          v-for="item in queryTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>

    <div class="rfid_b">
      <div>
      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      <el-button icon="el-icon-upload2" @click="exportExcel">导出</el-button>
      </div>
      <div>
        <el-checkbox v-model="checked1" border :disabled="checked2">客户补标</el-checkbox>
        <el-checkbox v-model="checked2" border :disabled="checked1">汇总</el-checkbox>
      </div>
    </div>

    <div>
      <el-table
      id="outTable"
      :data="tableData"
      style="width: 100%"
      height="70vh"
      :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
      :cell-style="{padding:0,height:'26px'}"
      highlight-current-row>
      <template v-for="i in rfidList" >
        <el-table-column
          :prop="i.prop"
          :label="i.label"
          :key="i.prop+Math.random()"
          :width="i.width">
        </el-table-column>
      </template>
      </el-table>
    </div>
    <div class="total">
      <p>合计厂进：{{total1}}</p>
      <p>合计厂退：{{total2}}</p>
      <p>合计客进：{{total3}}</p>
      <p>合计客退：{{total4}}</p>
      <p>合计库存：{{total5}}</p>
    </div>

    <foot-view class="footView" 
      :pagesNum="pagesNum" 
      :hasPagination=true
      :pageSize="limit"
      :tableTypeChange="tableTypeChange"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange">
      <div slot="text">
        <span>数据库：{{jxQuarter}}</span>
      </div>
    </foot-view>

  </div>
</template>

<script>
import footView from '../../../components/FootView'

import { getClient } from '../../../network/client'
import { electronicNumberQuery } from '../../../network/rfid'
import {getANumber} from '../../../network/manufacturer'
import XLSX from "xlsx"
import FileSaver from "file-saver"
import enterUp from '../../../components/mixins/enterUp'
import outex from '../../../components/mixins/outexp'
export default {
  name:'rfid_track_query',
  mixins:[enterUp,outex],
  created(){
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    let jxAgentVal = document.cookie.match(RegExp('jxAgent'+'=([^;]+)'))
    let operatorVal = document.cookie.match(RegExp('jxAgent'+'=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null
    this.operator = operatorVal ? operatorVal[1] : null
   if(jxAgentVal){
    this.jxAgent = jxAgentVal[1] == 1 ? true : false
   }
    
    this.rfidList = this.rfidList1
    this.inpList = this.getInput()
    // 获取所有客户信息
    getClient({limit:99999}).then(res => {
      // console.log(res)
      let list = res.data.data
      list.forEach(e => {
        if(e.stop != 1){
          this.customerList.push({value:e.no,label:e.name})
        }
      })
      if (this.jxAgent) {
          for (const i of this.customerList) {
            if (i.label == this.operator) {
              this.customerNo = i.value
              this.customerName = i.value
              break
            }
          }
        }
    });
    //货号
    // getANumber().then(res=>{
    //   console.log(res.data)
    //   let isExist = 0
    //   res.data.data.forEach(e => {
    //     // this.kindsNumberList.push({value:e.styleNumber,label:e.styleNumber})
    //     if (!this.kindsNumberList.length) {
    //       this.kindsNumberList.push({value:e.styleNumber,label:e.styleNumber,children:[{value:e.kindsNumber,label:e.kindsNumber}]})
    //     }
    //     for (let i of this.kindsNumberList) {
    //       if (e.styleNumber == i.value) {
    //         i.children.push({value:e.kindsNumber,label:e.kindsNumber})
    //         isExist = 1
    //         break
    //       }
    //       isExist = 0
    //     }
    //     if (!isExist) {
    //       this.kindsNumberList.push({value:e.styleNumber,label:e.styleNumber,children:[{value:e.kindsNumber,label:e.kindsNumber}]})
    //     }
    //   })
    // });
  },
  data(){
    return{
      total1:'',
      total2:'',
      total3:'',
      total4:'',
      total5:'',
      inpList:[],
      customerNo: '',
      customerName: '',
      customerList: [],
      RFID: '',
      kindsNumber: '',
      queryType: 0,
      queryTypeList: [
        {
          value: 0,
          label: '所有'
        },{
          value: 1,
          label: '厂进'
        },{
          value: 2,
          label: '厂退'
        },{
          value: 3,
          label: '客进'
        },{
          value: 4,
          label: '客退'
        }
      ],

      checked1: false,
      checked2: false,
      tableData: [],
      allData: [],
      
      rfidList:[],
      rfidList1: [
        {
          prop: 'operationCategory',
          label: '类别',
          width: '100'
        },
        {
          prop: 'no',
          label: '编号',
          width: '100'
        },
        {
          prop: 'receiptsSequence',
          label: '单据序号',
          width: ''
        },
        {
          prop: 'showCode',
          label: '电子标签',
          width: ''
        },
        {
          prop: 'kindsNumber',
          label: '货号',
          width: ''
        },
        {
          prop: 'factoryInput',
          label: '厂进',
          width: '100'
        },
        {
          prop: 'factoryOut',
          label: '厂退',
          width: '100'
        },
        {
          prop: 'customerInput',
          label: '客进',
          width: '100'
        },
        {
          prop: 'customerOut',
          label: '客退',
          width: '100'
        },
        {
          prop: 'rfid',
          label: 'RFID',
          width: '300'
        },
        {
          prop: 'intoSingle',
          label: '状态',
          width: '100'
        },
        {
          prop: 'customerSign',
          label: '客户补标',
          width: '100'
        }
      ],
      rfidList2: [
        {
          prop: 'showCode',
          label: '电子标签',
          width: ''
        },
        {
          prop: 'kindsNumber',
          label: '货号',
          width: ''
        },
        {
          prop: 'factoryInput',
          label: '厂进',
          width: '100'
        },
        {
          prop: 'factoryOut',
          label: '厂退',
          width: '100'
        },
        {
          prop: 'customerInput',
          label: '客进',
          width: '100'
        },
        {
          prop: 'customerOut',
          label: '客退',
          width: '100'
        },
        {
          prop: 'inventory',
          label: '库存',
          width: '100'
        },
        {
          prop: 'rfid',
          label: 'RFID',
          width:''
        }
      ],

      // 总数据条数
      dataLen: 0,
      // 总页码
      pagesNum: 0,
      // 分页条数
      limit: 20,
      // 当前页码
      currentPage: 1,
      tableTypeChange: true,
      // props: { multiple: true },
      kindsNumberList:[],
      jxQuarter: null,
      jxAgent:null,
      operator:null,
      // jxQuarter: document.cookie.match(RegExp('jxQuarter'+'=([^;]+)'))[1],
      // jxAgent: document.cookie.match(RegExp('jxAgent'+'=([^;]+)'))[1] == 1 ? true : false,
      // operator: document.cookie.match(RegExp('jxUser'+'=([^;]+)'))[1]
    }
  },
  watch:{
    RFID(a,b){
      if(a){
        this.RFID = a.toUpperCase().trim()
      }
    },
    kindsNumber(a,b){
      if(a){
        this.kindsNumber = a.toUpperCase().trim()
      }
    },
    checked1(a,b){
      this.search()
    },
    checked2(a,b){
      if (a) {
        this.rfidList = this.rfidList2
        this.search()
      } else {
        this.rfidList = this.rfidList1
        this.search()
      }
    },
    dataLen(a,b){
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
    limit(a,b){
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    }
  },
  components: {
    footView
  },
  methods: {
    search(){
      // let kn = ''
      // if (this.kindsNumber.length) {
      //   this.kindsNumber.forEach(e => {
      //     console.log(e[1])
      //     if (!kn) {
      //       kn = `'${e[1]}'`
      //     } else {
      //       kn = `${kn},'${e[1]}'`
      //     }
      //   })
      // }
      this.currentPage = 1
      this.tableTypeChange = !this.tableTypeChange
      this._electronicNumberQuery()
    },
    _electronicNumberQuery(){
      let pageData = {
        limit:this.limit,
        page:this.currentPage
      }
      let d = {
        customerNo: this.customerNo,
        showCode: this.RFID,
        kindsNumber: this.kindsNumber, //kn
        queryType: this.queryType,
        // 客户补标
        isPatch: this.checked1 ? 1 : 0,
        // 是否汇总
        isSummary: this.checked2,
        pageData
      }
      console.log(d)
      electronicNumberQuery(JSON.stringify(d)).then(res => {
        console.log(res)
        if(res.data.data == null){
          // this.$message({
          //   type: 'info',
          //   message: '未查询到此条件的数据'
          // });
          this.tableData = []
        }
        if (res.data.code == 200 && res.data.data != null) {
          for(let u of res.data.data){
            u.intoSingle = u.intoSingle == 0 ? '未入单' : '入单'
          }
          this.allData = res.data.data
          this.dataLen = this.allData.length
          this.tableData = this.allData.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)

          this.total1 = res.data.data.reduce((prev, next) => { //barcodeData数组里所有money的和
            return prev + next.factoryInput
          },0);
          this.total2 = res.data.data.reduce((prev, next) => { 
            return prev + next.factoryOut
          },0);
          this.total3 = res.data.data.reduce((prev, next) => { 
            return prev + next.customerInput
          },0);
          this.total4 = res.data.data.reduce((prev, next) => { 
            return prev + next.customerOut
          },0);
          this.total5 = res.data.data.reduce((prev, next) => { 
            return prev + next.inventory
          },0);
        }
        if(JSON.parse(JSON.stringify(res.data.data)) == ''){
          this.$message.warning('未查询到此条件下的数据')
        }
        if(this.checked2 == true){
          for(let s of res.data.data){
            s.inventory = s.factoryInput-s.factoryOut-s.customerInput+s.customerOut
          }
        }
      })
    },
    // 导出
    exportExcel(){
      // let xlsxParam = { raw: true }  //转换成excel时，使用原始的格式
      // let wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);
      // let wbout = XLSX.write(wb, {
      //   bookType: "xlsx",
      //   bookSST: true,
      //   type: "array"
      // })
      // try {
      //   FileSaver.saveAs(
      //     new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
      //     "RFID电子标签跟踪查询.xlsx"
      //   )
      // } catch (e) {
      //   if (typeof console !== "undefined") console.log(e, wbout)
      // }
      // return wbout
      let d = {
        customerNo: this.customerNo,
        showCode: this.RFID,
        kindsNumber: this.kindsNumber, //kn
        queryType: this.queryType,
        // 客户补标
        isPatch: this.checked1 ? 1 : 0,
        // 是否汇总
        isSummary: this.checked2,
      }
      console.log(d)
      electronicNumberQuery(JSON.stringify(d)).then(res => {
        console.log(res)
        if(res.data.data == null){
          this.$message({
            type: 'info',
            message: '未查询到此条件的数据'
          });
          this.tableData = []
        }
        if (res.data.code == 200 && res.data.data != null) {
          for(let u of res.data.data){
            u.intoSingle = u.intoSingle == 0 ? '未入单' : '入单'
          }
          this.tableData = res.data.data
          this.$nextTick(()=>{
          this.exp('RFID跟踪查询')
          this._electronicNumberQuery({limit:this.limit,page:this.currentPage})
        })
        }
      })
    },

    // 客户编号失去焦点
    customerNoBlur(){
      if (this.customerNo != '') {
        for (const i of this.customerList) {
          if (this.customerNo == i.value) {
            this.customerName = i.label
            return
          }
        }
        this.$alert('无此客户编号', '', {
          confirmButtonText: '确定'
        })
        this.customerNo = ''
        this.customerName = ''
      } else {
        this.customerName = ''
      }
    },
    handleSizeChange(val){//每页多少条
      this.limit = val
      //总页码
      this.pagesNum = Math.ceil(this.dataLen/this.limit)
      this._electronicNumberQuery()
    },
    handleCurrentChange(val){//当前页
    this.currentPage = val
    this._electronicNumberQuery()
    },
  }
}
</script>